<template>
    <div>
        <HeaderS :styleColor="1"></HeaderS>
        <div :class="screenWidth > 1000 ? 'page-content' : 'h5s-content'">
            <div class="main">
                <div class="bannerTop">
                    <div :class="screenWidth > 1000 ? 'banner' : 'h5s'">
                        <div class="title">玩转西安</div>
                        <div class="summary">丰富多彩的创意行程，让您的旅途更加有趣</div>
                        <img v-if="screenWidth > 1000" src="@/assets/img/tip.png" alt="" class="tip">
                    </div>
                </div>
                <div>
                    <div :class="screenWidth > 1000 ? 'wrap' : 'h5s2'">
                        <div class="title">旅游景区</div>
                        <div class="main">
                            <div class="swiper-wrap">
                                <div v-show="screenWidth > 1000" class="swiper-container swiper-container1">
                                    <div class="swiper-wrapper" v-if="dataInfo && dataInfo.list">
                                        <div v-for="item in dataInfo.list" :key="item.id"
                                            @click="openPage(item.id, item.url)"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img :src="item.thumbnail" class="cloud-img"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-show="screenWidth <= 1000" class="swiper-container swiper-container2">
                                    <div class="swiper-wrapper" v-if="dataInfo && dataInfo.list">
                                        <div v-for="item in dataInfo.list" :key="item.id"
                                            @click="openPage(item.id, item.url)"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img :src="item.thumbnail" class="cloud-img">
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="prev-next" v-if="screenWidth > 1000">
                                <i @click="prev" class="l-iconfont prev">&#xe603;</i>
                                <i @click="next" class="l-iconfont next">&#xe604;</i>
                            </div>
                        </div>
                        <div class="text" v-if="dataInfo && dataInfo.list">{{ dataInfo.list[cur].post_title }}</div>
                        <div v-if="screenWidth > 1000" @click="goMore('scenic-list')" class="more-btn"> 查看更多 </div>
                    </div>
                </div>
                <div>
                    <div :class="screenWidth > 1000 ? 'wrap2' : 'h53'">
                        <div class="banner">
                            <div class="text">
                                <div class="title">为你推荐</div>
                                <div class="summary">品质旅游，文化探秘；生活的品质没有界限！</div>
                            </div><img src="@/assets/img/sl.jpg">
                        </div>
                        <div class="main-wrap">
                            <div class="main-box">
                                <div class="list-one">
                                    <div :class="{ 'list-box': true, active: infoType == 1 }" @click="getType(1)">
                                        <div :class="infoType == 1 ? 'box-1' : 'box-2'">
                                            <div class="icon"><i class="l-iconfont">&#xe60c;</i></div>
                                            <div class="title">美食推荐</div>
                                            <div class="left-right-line"></div>
                                        </div>
                                    </div>
                                    <div :class="{ 'list-box': true, active: infoType == 2 }" @click="getType(2)">
                                        <div :class="infoType == 2 ? 'box-1' : 'box-2'">
                                            <div class="icon"><i class="l-iconfont">&#xe89b;</i></div>
                                            <div class="title">酒店信息</div>
                                        </div>
                                    </div>
                                    <div :class="{ 'list-box': true, active: infoType == 3 }" @click="getType(3)">
                                        <div :class="infoType == 3 ? 'box-1' : 'box-2'">
                                            <div class="icon"><i class="l-iconfont">&#xe617;</i></div>
                                            <div class="title">休闲购物</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-two" v-if="infoType == 1 && dataInfo && dataInfo.food">
                                    <div @click="openPage(item.id, item.url)" v-for="(item, index) in dataInfo.food"
                                        :key="index" v-show="index < 3"
                                        :class="{ 'list-box': true, marginShow: index == 1 }">
                                        <div class="img-url"
                                            :style="{ 'background-image': 'url(' + item.thumbnail + ')' }">
                                        </div>
                                        <div class="text-wrap">
                                            <div class="name"> {{ item.post_title }} </div><!----><!---->
                                        </div>
                                    </div>
                                </div>
                                <div class="list-two" v-if="infoType == 2 && dataInfo && dataInfo.hotel">
                                    <div @click="openPage(item.id, item.url)" v-for="(item, index) in dataInfo.hotel"
                                        :key="index" v-show="index < 3"
                                        :class="{ 'list-box': true, marginShow: index == 1 }">
                                        <div class="img-url"
                                            :style="{ 'background-image': 'url(' + item.thumbnail + ')' }">
                                            <span class="tips"> {{ item.level }} </span>
                                            <!---->
                                        </div>
                                        <div class="text-wrap">
                                            <div class="name"> {{ item.post_title }} </div><!----><!---->
                                            <div class="phone"><i class="l-iconfont">&#xe634;</i>
                                                电话：{{ item.phone }} </div>
                                            <div class="address"><i class="l-iconfont">&#xe611;</i>
                                                地址：{{ item.address }} </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-two" v-if="infoType == 3 && dataInfo && dataInfo.goods">
                                    <div @click="openPage(item.id, item.url)" v-for="(item, index) in dataInfo.goods"
                                        :key="index" v-show="index < 3"
                                        :class="{ 'list-box': true, marginShow: index == 1 }">
                                        <div class="img-url"
                                            :style="{ 'background-image': 'url(' + item.thumbnail + ')' }">
                                            <!---->
                                        </div>
                                        <div class="text-wrap">
                                            <div class="name"> {{ item.post_title }} </div><!----><!---->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="more-btn"
                                @click="goMore(infoType == 1 ? 'food-list' : infoType == 2 ? 'hotel-list' : 'shopping-list')">
                                查看更多
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <FooterS></FooterS>
    </div>
</template>
<script>
import Swiper from 'swiper'
export default ({
    data() {
        return {
            myVar: 'Hello, Vue.js!',
            swiper: '',
            jqu: [],
            cur: 2,
            infoType: 1,
            list: [1, 2, 3],
            dataInfo: {},
            swiper2: '',
            loading: false
        }
    },
    computed: {
        screenWidth() {
            return this.$store.getters.screenWidth
        }
    },
    watch: {
        screenWidth(n, o) {
            let cur = this.cur

            if (n <= 1000 && o > 1000) {

                this.$nextTick(() => {
                    this.getSwiper2(cur)
                })
            } else if (n > 1000 && o <= 1000) {
                this.$nextTick(() => {
                    this.getSwiper(cur)
                })
            } else {
                return
            }
        }
    },
    mounted() {
        this.getSwiper(2)
        this.getSwiper2(2)
    },
    created() {
        this.getData()
    },
    methods: {
        openPage(id, url) {
            let infoType = this.infoType
            if (this.infoType)
                if (url) {
                    this.$confirm('', '温馨提示', {
                        message: this.$store.state.cnode,
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: '继续访问',
                        cancelButtonText: '放弃',
                        center: true
                    })
                        .then(_ => {
                            window.open(url, '_blank');
                        })
                        .catch(_ => { })
                } else {
                    this.$router.push({
                        path: infoType == 1 ? 'food-details' : infoType == 2 ? 'hotel-details' : 'news-details',
                        query: {
                            id: id
                        }
                    })
                }
        },
        getData() {
            this.loading = true
            this.$api.getPlay({ lang: this.$i18n.locale }).then((res) => {
                if (res.data.code == 1) {
                    this.loading = false
                    console.log(res.data.data);

                    this.dataInfo = res.data.data
                    this.$nextTick(() => {
                        if (this.screenWidth > 1000) {
                            this.$nextTick(() => {
                                this.getSwiper(2)
                            })
                        } else {
                            this.$nextTick(() => {
                                this.getSwiper2(2)
                            })

                        }
                    })
                }
            })
        },
        goMore(path) {
            this.$router.push(path)
        },
        getType(i) {
            this.infoType = i
            this.$nextTick(() => {
                if (this.screenWidth > 1000) {
                    this.$nextTick(() => {
                        const swiper = this.swiper;
                        // 可以在这里调用swiper的update方法来确保布局正确
                        swiper.update();
                    });
                } else {
                    this.$nextTick(() => {
                        const swiper = this.swiper2;
                        // 可以在这里调用swiper的update方法来确保布局正确
                        swiper.update();
                    });
                }
            })
        },
        getSwiper(cur) {
            let that = this
            this.swiper = new Swiper('.swiper-container1', {
                slidesPerView: 'auto',
                centeredSlides: true,
                allowTouchMove: false,
                spaceBetween: "9.4%",
                initialSlide: cur,
                navigation: {
                    nextEl: '.next',
                    prevEl: '.prev',
                },
                on: {
                    slideChangeTransitionStart: function () {
                        that.cur = this.activeIndex
                    }
                },
            });

        },
        getSwiper2(cur) {
            let that = this
            this.swiper2 = new Swiper('.swiper-container2', {
                slidesPerView: 'auto',
                centeredSlides: true,
                spaceBetween: '9.4%',
                initialSlide: cur,
                on: {
                    slideChangeTransitionStart: function () {
                        that.$nextTick(() => {
                            that.cur = this.activeIndex
                        })
                    }
                },
            });


        },
        prev() {
            if (this.cur > 0) {
                this.cur -= 1
            }

        },
        next() {
            if (this.cur + 1 < this.jqu.length) {
                this.cur += 1
            }
            console.log(this.cur);
        }
    }
})
</script>
<style scoped>
.page-content {
    min-height: -webkit-calc(100vh - 25.52083vw);
    min-height: calc(100vh - 25.52083vw);
    min-width: 70.83333vw;
}

.bannerTop .banner {
    width: 100vw;
    height: 39.58333vw;
    background-image: url(@/assets/img/sl2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    text-align: center;
    color: #fff;
    position: relative;
}

.bannerTop .banner .title {
    font-weight: bold;
    font-size: 2.08333vw;
    margin: 16.66667vw 0 1.04167vw;
}

.bannerTop .banner .summary {
    font-size: 1.5625vw;
}

.bannerTop .banner .tip {
    width: 1.04167vw;
    position: absolute;
    bottom: 2.08333vw;
    left: -webkit-calc(50% - 0.52083vw);
    left: calc(50% - 0.52083vw);
    -webkit-animation: bounce-down-data-bd225cd6 1.6s linear infinite;
    animation: bounce-down-data-bd225cd6 1.6s linear infinite;
    max-width: 100%;
    border: 0;
    vertical-align: middle;
}

@keyframes bounce-down-data-bd225cd6 {
    25% {
        -webkit-transform: translateY(-4px);
    }

    50%,
    100% {
        -webkit-transform: translateY(0);
    }

    75% {
        -webkit-transform: translateY(4px);
    }
}

.wrap {
    width: 100%;
    height: auto;
    position: relative;
    background: #fff;
    overflow: hidden;
}

.wrap .title {
    font-weight: bold;
    font-size: 1.5625vw;
    margin: 5.72917vw auto 3.64583vw;
    text-align: center;
}

.wrap .main {
    width: 87.5vw;
    margin: auto;
    position: relative;
}

.wrap .swiper-wrap {
    width: 75.15625vw;
    margin: auto;
    position: relative;
    z-index: 9;
}

.wrap .swiper-wrap .swiper-container {
    height: 20.83333vw;
}

.wrap .swiper-wrap .swiper-slide {
    width: auto !important;
    height: auto;
}

.wrap .swiper-wrap .swiper-wrapper {
    -webkit-box-align: center;
    align-items: center;
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.wrap .swiper-wrap .swiper-slide .box {
    width: 100%;
    cursor: pointer;
}

.wrap .swiper-wrap .swiper-slide .box .img-box {
    width: 9.375vw;
    height: 9.375vw;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.wrap .swiper-wrap .swiper-slide .box .img-box img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.wrap .swiper-wrap .swiper-slide-active {
    -webkit-transform: scale(2);
    transform: scale(2);
    position: relative;
    background: #ffffff;
    box-shadow: 0 0 1.04167vw -0.78125vw #000000;
    border-radius: 50%;
}

.wrap .swiper-wrap .swiper-slide-active .box .img-box {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    border: 1px dotted rgba(51, 51, 51, 0.1);
    border-radius: 50%;
}

.wrap .swiper-wrap .swiper-slide-active .box img {
    display: block;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

.wrap .main .prev-next i {
    position: absolute;
    top: 10.41667vw;
    font-size: 1.61458vw;
    cursor: pointer;
    color: #d8d8d8;
}

.wrap .main .prev {
    left: 0;
}

.wrap .main .next {
    right: 0;
}

.wrap .text:hover {
    color: #e31c1c;
}

.wrap .main .prev-next i:hover {
    color: #19aa8e;
}

.wrap .text {
    text-align: center;
    color: #333;
    font-size: 0.83333vw;
    margin: 2.60417vw 0 5.72917vw;
    cursor: pointer;
}

.wrap2 .banner {
    width: 100%;
    height: 31.25vw;
    background: transparent;
    overflow: hidden;
    text-align: left;
}

.wrap2 .banner .text {
    max-width: 87.5vw;
    margin: auto;
    color: #fff;
}

.wrap2 .banner .text .title {
    font-size: 1.5625vw;
    margin: 11.97917vw 0 1.04167vw;
}

.wrap2 .banner .text .summary {
    font-size: 0.72917vw;
}

.wrap2 .banner img {
    width: 100vw;
    height: 56.25vw;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

.wrap2 .main-wrap {
    width: 100%;
    padding: 5.20833vw 0 4.6875vw;
    background: #f5f5f5;
}

.wrap2 .main-box {
    max-width: 87.5vw;
    margin: auto;
}

.wrap2 .main-box .list-one {
    height: 5.20833vw;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    align-items: flex-end;
}

.wrap2 .main-box .list-one .box-1 {
    width: 27.08333vw;
    height: 13.02083vw;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    text-align: center;
    background: #e31c1c;
    position: relative;
    padding-top: 2.60417vw;
}

.wrap2 .main-box .list-one .box-1::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 1.04167vw solid transparent;
    border-right: 1.04167vw solid transparent;
    border-top: 0.67708vw solid #e31c1c;
    bottom: -0.625vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.wrap2 .main-box .list-one .box-1 .icon {
    margin: 0 auto 0.78125vw;
}

.wrap2 .main-box .list-one .box-1 .icon i {
    font-size: 2.5vw;
    color: #fff;
}

.wrap2 .main-box .list-one .box-1 .title {
    font-size: 1.25vw;
    color: #fff;
}

.wrap2 .main-box .list-one .box-1 .left-right-line {
    width: 1.04167vw;
    height: 0.10417vw;
    background-color: #fff;
    margin: 0.78125vw auto 0;
}

.wrap2 .main-box .list-one .list-box .box-2 {
    width: 27.08333vw;
    height: 5.20833vw;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.wrap2 .main-box .list-one .list-box .box-2 .icon {
    margin-right: 1.30208vw;
}

.wrap2 .main-box .list-one .list-box .box-2 .icon i {
    font-size: 2.08333vw;
    color: #333;
}

.wrap2 .main-box .list-one .list-box .box-2 .title {
    font-size: 1.04167vw;
    color: #333;
}

.wrap2 .main-box .list-two {
    margin-top: 2.60417vw;
}

.wrap2 .main-box .list-two .list-box {
    width: 27.08333vw;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.wrap2 .main-box .list-two .list-box .img-url {
    width: 100%;
    height: 15.625vw;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.wrap2 .main-box .list-two .list-box .text-wrap {
    width: 100%;
    background: #fff;
    padding: 2.03125vw 1.51042vw 1.66667vw;
}

.wrap2 .main-box .list-two .list-box .text-wrap .name {
    font-size: 0.83333vw;
    font-weight: bold;
    color: #333;
}

.wrap2 .main-box .list-two .marginShow {
    margin: 0 3.125vw;
}

.wrap2 .main-box .list-two .list-box .img-url .tips {
    color: hsla(0, 0%, 100%, 0.85);
    padding: 0.15625vw 0.52083vw;
    border-radius: 0.15625vw;
    border: 1px solid hsla(0, 0%, 100%, 0.6);
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 0.52083vw;
    right: 0.52083vw;
}

.wrap2 .main-box .list-two .list-box .text-wrap .phone {
    font-size: 0.72917vw;
    color: #666;
    margin: 1.04167vw 0 0.52083vw;
}

.wrap2 .main-box .list-two .list-box .text-wrap .address {
    font-size: 0.72917vw;
    color: #666;
}

.wrap2 .main-box .list-two .list-box:hover .text-wrap .name {
    color: #e31c1c;
}

.wrap2 .main-box .list-one .list-box {
    cursor: pointer;
    width: 27.08333vw;
    background: #fff;
}

@media (max-width:1000px) {
    .h5s-content {
        min-height: -webkit-calc(100vh - 6rem);
        min-height: calc(100vh - 6rem);
    }

    .h5s {
        width: 7.5rem;
        height: 4.6rem;
        background-image: url(@/assets/img/sl2.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        text-align: center;
        overflow: hidden;
        font-size: 0;
        color: #fff;
    }

    .h5s .title {
        font-size: 0.4rem;
        font-weight: 700;
        margin: 1.9rem 0 0.3rem;
    }

    .h5s .summary {
        font-size: 0.3rem;
    }

    .h5s2 {
        font-size: 0;
        background: #fff;
        overflow: hidden;
        text-align: center;
    }

    .h5s2 .title {
        font-size: 0.4rem;
        color: #333;
        font-weight: 700;
        margin: 0.7rem 0 0.5rem;
    }

    .h5s2 .swiper-wrap {
        width: 100%;
        margin: auto;
        padding: 0 0.75rem;
        position: relative;
        z-index: 9;
    }

    .h5s2 .swiper-wrap .swiper-container {
        height: 2.6rem;
    }

    .h5s2 .swiper-wrap .swiper-wrapper {
        -webkit-box-align: center;
        align-items: center;
    }

    .h5s2 .swiper-wrap .swiper-slide-active {
        -webkit-transform: scale(2);
        transform: scale(2);
        position: relative;
        background: #ffffff;
        box-shadow: 0 0 1.04167vw -0.78125vw #000000;
        border-radius: 50%;
    }

    .h5s2 .swiper-wrap .swiper-slide .box {
        width: 100%;
        cursor: pointer;
    }

    .h5s2 .swiper-wrap .swiper-slide .box .img-box {
        width: 1.2rem;
        height: 1.2rem;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .h5s2 .swiper-wrap .swiper-slide-active .box .img-box {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        border: 1px dotted rgba(51, 51, 51, 0.1);
        border-radius: 50%;
    }

    .h5s2 .swiper-wrap .swiper-slide {
        width: auto !important;
        height: auto;
    }

    .h5s2 .swiper-wrap .swiper-slide .box .img-box img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .h5s2 .swiper-wrap .swiper-slide-active .box img {
        display: block;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    .h5s2 .text {
        text-align: center;
        color: #333;
        font-weight: 700;
        font-size: 0.26rem;
        margin: 0.4rem 0 1rem;
    }

    .h53 .banner {
        width: 7.5rem;
        height: 6rem;
        text-align: left;
        background: transparent;
        overflow: hidden;
        position: relative;
    }

    .h53 .banner .text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0 0.3rem;
        margin: auto;
        color: #fff;
    }

    .h53 .banner .text .title {
        font-size: 0.4rem;
        font-weight: 700;
        margin: 3.1rem 0 0.3rem;
    }

    .h53 .banner .text .summary {
        font-size: 0.3rem;
    }

    .h53 .banner img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .h53 .main-wrap {
        width: 100%;
        padding: 0 0.3rem 0.9rem;
        background: #f5f5f5;
        font-size: 0;
    }

    .h53 .main-box {
        width: 100%;
        position: relative;
        top: -0.7rem;
        margin: auto;
    }

    .h53 .main-box .list-one {
        height: 1.4rem;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: end;
        align-items: flex-end;
    }

    .h53 .main-box .list-one .list-box .title {
        font-size: 0.24rem;
        font-weight: 400;
        color: #333;
    }

    .h53 .main-box .list-one .list-box {
        cursor: pointer;
        width: 2rem;
        height: 1.4rem;
        background: #fff;
        text-align: center;
        padding-top: 0.15rem;
    }

    .h53 .main-box .list-one .list-box .icon i {
        font-size: 0.4rem;
        color: #333;
    }

    .h53 .main-box .list-one .active {
        background: #e31c1c;
    }

    .h53 .main-box .list-one .list-box .icon i {
        font-size: 0.4rem;
        color: #333;
    }

    .h53 .main-box .list-one .active .icon i {
        color: #fff;
    }

    .h53 .main-box .list-one .active .title {
        color: #fff;
    }

    .h53 .main-box .list-two {
        margin-top: 0.6rem;
    }

    .h53 .main-box .list-two .list-box {
        width: 100%;
        cursor: pointer;
        display: inline-block;
        position: relative;
        margin-bottom: 0.6rem;
    }

    .h53 .main-box .list-two .list-box .img-url {
        width: 100%;
        height: 3.9rem;
        position: relative;
        background: #fff;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repea
    }

    .h53 .main-box .list-two .list-box .text-wrap {
        width: 100%;
        background: #fff;
        padding: 0.39rem 0.29rem 0.32rem;
    }

    .h53 .main-box .list-two .list-box .text-wrap .name {
        font-size: 0.3rem;
        font-weight: bold;
        color: #333;
    }

    .h53 .main-box .list-two .list-box .text-wrap .phone {
        font-size: 0.24rem;
        color: #666;
        margin: 1.04167vw 0 0.52083vw;
    }

    .h53 .main-box .list-two .list-box .text-wrap .address {
        font-size: 0.24rem;
        color: #666;
    }

    .h53 .main-box .list-two .list-box .img-url .tips {
        color: hsla(0, 0%, 100%, 0.85);
        padding: 0.03rem 0.1rem;
        border-radius: 0.03rem;
        border: 1px solid hsla(0, 0%, 100%, 0.6);
        background: rgba(0, 0, 0, 0.2);
        position: absolute;
        bottom: 0.1rem;
        right: 0.1rem;
        font-size: 0.24rem;
    }

    .h53 .more-btn {
        margin: -0.7rem auto 0;
        width: 2rem;
        height: 0.6rem;
        background: #fff;
        border-radius: 0.3rem;
        line-height: 0.6rem;
        text-align: center;
        color: #666;
        font-size: 0.24rem;
    }
}
</style>